<template>
  <v-app-bar
    app
    color="appbar"
    dark
    :height="$vuetify.breakpoint.smAndDown ? 50 : 80"
    class="z-index-xl"
  >
    <div
      class="iconfont col-2 cur-point"
      v-if="$vuetify.breakpoint.smAndDown"
      @click="oPenTheDrawer"
    >
      &#xeaf1;
    </div>
    <div
      class="d-flex align-center justify-center col-8 col-md-2 justify-md-start cur-point"
      @click="goToHome"
    >
      <v-img
        src="../../../public/img/logo.svg"
        max-width="30"
        class="mr-2 logo"
      ></v-img>
      <span class="text-h6">微医</span>
    </div>
    <v-tabs v-if="!$vuetify.breakpoint.smAndDown" :value="value">
      <v-tabs-slider color="secondary"></v-tabs-slider>
      <v-tab v-for="(tab, index) in tabs" :key="index" @click="toPath(index)"
        ><span class="text-h6">{{ tab.text }}</span></v-tab
      >
    </v-tabs>
    <div class="pr-10">
      <v-menu offset-y v-if="isLogin">
        <template v-slot:activator="{ on, attrs }">
          <v-avatar color="black" size="40" v-bind="attrs" v-on="on">
            <v-img :src="avatar"></v-img>
          </v-avatar>
        </template>
        <v-list>
          <v-list-item color="primary">
            <v-list-item-title class="cur-point" @click="gotoInfo"
              >个人资料</v-list-item-title
            >
          </v-list-item>
          <v-list-item>
            <v-list-item-title class="cur-point" @click="gotoYYGL">我的预约</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title class="cur-point" @click="gotoYYGL"
              >预约管理</v-list-item-title
            >
          </v-list-item>
          <v-list-item>
            <v-list-item-title @click="logOut" class="cur-point"
              >退出登录</v-list-item-title
            >
          </v-list-item>
        </v-list>
      </v-menu>
      <v-btn color="primary" @click="openLoginBox" v-else>登录</v-btn>
    </div>
    <div class="ml-auto">
      <v-btn
        icon
        class="iconfont"
        elevation="2"
        small
        @click="switchDark"
        v-html="theme.name == 'women' ? '&#xe613;' : '&#xe605;'"
      ></v-btn>
    </div>
  </v-app-bar>
</template>



<script>
import eventBus from "../../eventBus/eventBus.js";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: {
    tabs: Array,
  },
  data() {
    return {
      value: 0,
      isLogin: false,
      avatar: "",
    };
  },
  computed: {
    ...mapState(["theme", "profile"]),
    getPath() {
      return this.$route.path;
    },
  },
  watch: {
    getPath(newPath) {
      this.tabs.forEach((item, index) => {
        if (item.path == newPath) {
          this.value = index;
        }
      });
    },
  },
  methods: {
    ...mapMutations(["saveTheme", "setProfile"]),
    ...mapActions(["getUserInfo", "getDoctorInfo"]),

    gotoInfo() {
      const that = this;
      this.$router.push({
        name: `${that.profile.isDoctor ? "doctorInfo" : "userInfoFill"}`,
        params: {
          id: that.profile.userId,
        },
      });
    },
    gotoYYGL() {
      this.$router.push(
        `${
          this.$store?.state?.profile?.isDoctor
            ? "/resWithDoctor"
            : "/personage"
        }`
      );
      this.value = 5;
    },

    logOut() {
      window.localStorage.removeItem("weiyi_token");
      this.$router.push("/home");
      window.location.reload();
    },
    toPath(newIndex) {
      const toPath = this.tabs[newIndex].path;
      console.log(toPath)
      if (this.$route.path !== toPath) {
        this.$router.push(toPath);
      }
      this.value = newIndex;
    },
    openLoginBox() {
      eventBus.$emit("openLoginBox");
    },

    oPenTheDrawer() {
      eventBus.$emit("openTheDrawer");
    },
    switchDark() {
      const theme =
        JSON.parse(window.localStorage.getItem("theme")).name == "women"
          ? this.$default
          : this.$women;
      window.localStorage.setItem("theme", JSON.stringify(theme));

      this.$vuetify.theme.themes.light = theme.colors;
      this.saveTheme(theme);
    },
    goToHome() {
      this.$route.path !== "/home" && this.$router.push("/home");
    },
  },
  async mounted() {
    const localThem = window.localStorage.getItem("theme")
      ? JSON.parse(window.localStorage.getItem("theme"))
      : this.$default;
    this.saveTheme(localThem);

    const token = window.localStorage.getItem("weiyi_token");
    if (token) {
      this.$axios.defaults.headers["authorization"] = `Bearer ${token}`;
      const { data } = await this.$axios.get("profile");
      if (data) {
        this.setProfile(data);
        this.avatar = data.avatar;
        if (data.isDoctor) {
          this.getDoctorInfo(data?.userId);
        } else {
          this.getUserInfo(data?.userId);
        }
        this.isLogin = true;
      }
    }
  },
};
</script>



<style lang="scss" scoped>
.iconfont {
  font-size: 30px;
}
.logo {
  width: 30px;
}
</style>
